var apiUrl = "http://112.91.146.165:13805/";
var refreashTime = 1000; //热力图刷新间隔
var tokenFlag = false;
var tokenVal; //token值
var apiData;
var initMapData = [];
var newInitMapData = [];
var petitionListData,
  industryPointListData,
  livePointListData,
  functionAreaData,
  builidPointListData,
  trafficPointListData,
  whistleListData,
  memsPointListData,
  monitorSourceListData,
  functionPointListData,
  sensitiveInfoData;

// 当前的单个点位
var currentSinglePos = null;
// 热力图相关数据
var heatPoiData = [];
var heatArrData = [];
var heatArr = [];
var drawHeatDataInter; //热力图动态渲染计时器

// 点击事件相关数据
var selectedPoint = {
  selectedPointObj: null,
  pointName: null,
  pointCode: null,
  pointType: null,
  pointTypeText: null,
  noiseMonitorType: null,
};

// 监听下拉框变化
var selectPara = "real";
// 点位
$("body").on("change", "select[name=streetOption]", function () {
  selectPara = $("#streetOption").find("option:selected").val();
  console.log(selectPara);
  if (selectPara != "") {
    clearInterval(reVoiceDataInter);
    getNewBigViewMapInfo("", selectPara);
    reVoiceData();
  }
});
// 热力图
$("body").on("change", "select[name=roadOption]", function () {
  selectPara = $("#roadOption").find("option:selected").val();
  console.log(selectPara);
  getRectLatLngHandler(
    [heatPoiData[selectPara].longitude, heatPoiData[selectPara].latitude],
    heatPoiData[selectPara].dataList.length,
    heatPoiData[selectPara].dataList
  );
});

// 样式相关方法
// 删除数组中某个元素
function removeArrItem(_arr, _val) {
  _arr.splice(_arr.indexOf(_val), 1);
}
// 下方按钮样式
var bottomObj = document.querySelector(".right-buttonArea");
var selectedBtnArr = [];
var selectTypeArr = [
  "builidPointListData",
  "industryPointListData",
  "livePointListData",
  "trafficPointListData",
  "functionPointListData",
];
bottomObj.onclick = function (e) {
  var selectedBtn = e.target;
  var selectType = e.target.id;
  if (selectedBtn.tagName == "IMG") {
    // 恢复按钮
    if (selectedBtn.src.includes("a.png")) {
      removeArrItem(selectedBtnArr, selectedBtn);
      removeArrItem(selectTypeArr, selectType);
      // console.log(selectedBtnArr);
      // console.log(selectTypeArr);
      showSelectListData(selectTypeArr);
      selectedBtn.src =
        selectedBtn.src
          .split(".png")[0]
          .substr(0, selectedBtn.src.split(".png")[0].length - 1) + ".png";
    } else {
      selectedBtnArr.push(selectedBtn);
      selectTypeArr.push(selectType);
      // console.log(selectedBtnArr);
      // console.log(selectTypeArr);
      // 按钮active
      showSelectListData(selectTypeArr);
      selectedBtn.src = selectedBtn.src.split(".png")[0] + "a.png";
    }
  }
};

/**
 * 获取秒级数据
 * @_pointCode 站点编号
 * @_minuteTime 分钟时间 yyyy-MM-dd HH:mm:00
 */
var lpPointData;
function getPointLpData(_pointCode, _minuteTime) {
  $.ajax({
    type: "POST",
    url: apiUrl + "comleader/dataOutput/getPointLpData",
    dataType: "application/json",
    headers: {
      "Content-Type": "application/json",
      accessToken: "comleader@123",
    },
    data: JSON.stringify({
      pointCode: "",
      minuteTime: _minuteTime,
    }),
    complete: (res) => {
      if (res.readyState == 4) {
        // getNewBigViewMapInfo("", "minute");
        // reVoiceData();
        currentSinglePos = null;
        lpPointData = JSON.parse(res.responseText).data;
        console.log(lpPointData);
        if (graphicLayer != null) {
          console.log("清空graphicLayer");
          map.removeLayer(graphicLayer);
          graphicLayer = null;
          graphicLayer = new mars3d.layer.GraphicLayer();
          map.addLayer(graphicLayer);
        }
        if (fzLayer != null) {
          console.log("清空fzLayer");
          map.removeLayer(fzLayer);
          fzLayer = null;
          fzLayer = new mars3d.layer.GraphicLayer();
          map.addLayer(fzLayer);
        }
        if (fzInter) {
          console.log("fzInter已销毁");
          clearInterval(fzInter);
        }
        changeFzStyle();
        for (let item of lpPointData) {
          // 赋值当前画的单个点位供视角设置
          if (item.pointCode == _pointCode) {
            currentSinglePos = item;
            console.log("cpos", currentSinglePos);
            var posView = new mars3d.LngLatPoint(
              currentSinglePos.longitude,
              currentSinglePos.latitude,
              0
            );

            map.flyToPoint(posView, {
              radius: 1000,
            });
          }
          if (item.isMain) {
            drawSinglePos(
              [item.longitude, item.latitude],
              item.pointName,
              item.dataList,
              item
            );
          } else {
            drawFZPos([item.longitude, item.latitude], item, true);
          }
        }
        getheatData();
        // // 赋值当前画的单个点位供视角设置
        // currentSinglePos = lpPointData;
      } else {
        toastr.error("接口请求出错,请稍后重试！");
      }
    },
    failed: (res) => {
      toastr.error(res);
    },
  });
}

function initMapPointByRecTime(pointCode, time) {
  getPointLpData(pointCode, time);
  getheatData();
}

/**
 * 首页站点接口
 * @_code 区域/镇街编号
 * @_dataType real-实时数据 minute-分钟数据 hour-小时数据 dn-昼夜间数据
 */
function getNewBigViewMapInfo(_code, _dataType) {
  console.log("地图点位接口被请求");
  $.ajax({
    type: "POST",
    url: apiUrl + "comleader/dataOutput/getNewBigViewMapInfo",
    dataType: "application/json",
    headers: {
      "Content-Type": "application/json",
      accessToken: "comleader@123",
    },
    data: JSON.stringify({
      code: _code,
      dataType: _dataType,
    }),
    complete: (res) => {
      if (res.readyState == 4) {
        // 每次绘制前清空已有标注
        if (graphicLayer != null) {
          console.log("清空graphicLayer");
          map.removeLayer(graphicLayer);
          graphicLayer = null;
          graphicLayer = new mars3d.layer.GraphicLayer();
          map.addLayer(graphicLayer);
        }

        newInitMapData = [];
        var resData = JSON.parse(res.responseText).data;
        console.log(resData);
        var apiDataTypes = Object.keys(resData);

        // console.log(resData);
        petitionListData = resData.petitionList;
        industryPointListData = resData.industryPointList;
        livePointListData = resData.livePointList;
        builidPointListData = resData.builidPointList;
        trafficPointListData = resData.trafficPointList;
        whistleListData = resData.whistleList;
        memsPointListData = resData.memsPointList;
        monitorSourceListData = resData.monitorSourceList;
        functionPointListData = resData.functionPointList;
        sensitiveInfoData = resData.sensitiveInfo;

        newInitMapData.push(industryPointListData);
        newInitMapData.push(livePointListData);
        newInitMapData.push(builidPointListData);
        newInitMapData.push(trafficPointListData);
        newInitMapData.push(memsPointListData);
        newInitMapData.push(functionPointListData);

        for (let item of apiDataTypes) {
          // 忽略敏感数据
          if (item != "sensitiveInfo") {
            if (eval(item + "Data").length != 0) {
              loadListData(item + "Data");
            }
          }
        }
        getheatData();
      } else {
        toastr.error("接口请求出错,请稍后重试！");
      }
    },
    failed: (res) => {
      toastr.error(res);
    },
  });
}

// 获取热力图数据
function getheatData() {
  $.ajax({
    type: "POST",
    url: apiUrl + "comleader/dataOutput/getMapInfo",
    dataType: "application/json",
    headers: {
      "Content-Type": "application/json",
      accessToken: "comleader@123",
    },
    complete: (res) => {
      if (res.readyState == 4) {
        var resData = JSON.parse(res.responseText).data;
        // 去除空数据
        heatPoiData = [];
        for (let item of resData.pointList) {
          if (item.dataList.length > 0) {
            heatPoiData.push(item);
          }
        }
        console.log(heatPoiData);
        // 构建热力图数组
        heatArrData = [];
        heatArr = [];
        // for (let item of heatPoiData) {
        //   for (let i = 0; i < heatPoiData[0].dataList.length; i++) {
        //     heatArrData.push({
        //       lng: item.longitude,
        //       lat: item.latitude > 23 ? 22.2 : item.latitude,
        //       value: item.dataList[i],
        //     });
        //   }
        // }
        heatArr = listChunk(heatArrData, heatPoiData[0].dataList.length);

        for (let i = 0; i < 20; i++) {
          for (let item of heatPoiData) {
            heatArrData.push({
              lng: item.longitude,
              // lat: item.latitude > 23 ? 22.2 : item.latitude,
              lat: item.latitude,
              // value: item.dataList[0] == undefined ? 0 : item.dataList[i],
              value: item.dataList[i].value,
            });
          }
        }
        heatArr = listChunk(heatArrData, heatPoiData.length);
        // console.log(heatArr);
        drawHeat(heatArr[0]);
        var drawTimes = 1; //当前为第几组的噪声数据
        drawHeatDataInter = setInterval(() => {
          if (drawTimes < heatArr.length) {
            // drawHeat(heatArr[drawTimes++]);
            heatLayer.setPositions(heatArr[drawTimes++], true);
          } else {
            clearInterval(drawHeatDataInter); //清除计时器
            getheatData();
            console.log("重新请求了热力图数据接口");
          }
        }, refreashTime);
      } else {
        toastr.error("噪声点数据加载错误,请稍后重试！");
      }
    },
    failed: (res) => {
      toastr.error(res);
    },
  });
}

// 按类别加载点位
function loadListData(listData) {
  // console.log(eval(listData));

  // if (graphicLayer != null) {
  //   console.log("清空graphicLayer");
  //   map.removeLayer(graphicLayer);
  //   graphicLayer = null;
  //   graphicLayer = new mars3d.layer.GraphicLayer();
  //   map.addLayer(graphicLayer);
  //   // //图层点击事件
  //   // graphicLayer.on(mars3d.EventType.click, function (event) {
  //   //   console.log(event.graphic);
  //   //   selectedPoint = {
  //   //     pointName: event.graphic.attr.attr.pointName,
  //   //     pointCode: event.graphic.attr.attr.pointCode,
  //   //     noiseMonitorType: event.graphic.attr.pointType,
  //   //   };
  //   //   console.log(selectedPoint);
  //   // });
  // }
  if (listData == "monitorSourceListData") {
    // 监测源数据经度的单词拼写错误
    for (let item of eval(listData)) {
      if (!!item.longtitude && !!item.latitude) {
        // console.log(item);
        drawYQDPos([item.longtitude, item.latitude], item.sourceName, item);
      }
    }
  } else if (listData == "petitionListData") {
    // 投诉点坐标返回格式和其他不同
    console.log("petitionListData");
    for (let item of eval(listData)) {
      // console.log(item.petitionLatLog);
      drawTSPos(
        [
          parseFloat(item.petitionLatLog.split(",")[0]),
          parseFloat(item.petitionLatLog.split(",")[1]),
        ],
        item.petitionTitle,
        item
      );
    }
  } else if (listData == "memsPointListData") {
    if (fzInter) {
      console.log("fzInter已销毁");
      clearInterval(fzInter);
    }
    for (let item of eval(listData)) {
      drawFZPos([item.longitude, item.latitude], item, false);
    }
    changeFzStyle();
  } else if (listData == "whistleListData") {
    console.log("whistleListData");
    for (let item of eval(listData)) {
      drawWhistlePos(
        [item.longitude, item.latitude],
        item.pointName,
        item.dataCount,
        item
      );
    }
  } else {
    if (eval(listData).length == 0) {
      toastr.error("暂无数据！");
    } else {
      for (let item of eval(listData)) {
        if (!!item.longitude && !!item.latitude) {
          // console.log(item);
          drawMostPos(
            [item.longitude, item.latitude],
            item.pointCode,
            item.pointName,
            !!item.dataList ? item.dataList : null,
            item,
            listData
          );
        }
      }
    }
  }
}

// 返回点位的标注图标类型
function getIconType(_type) {
  var iconType = null;
  switch (_type) {
    case "LIVE":
      iconType = "shsh.png";
      break;
    case "BUILDING":
      iconType = "jzgd.png";
      break;
    case "FUNCTION":
      iconType = "gn.png";
      break;
    case "INDUSTRIAL":
      iconType = "gy.png";
      break;
    case "TRAFFIC":
      iconType = "jt.png";
      break;
    case "industryPointListData":
      iconType = "gy.png";
      break;
    case "livePointListData":
      iconType = "shsh.png";
      break;
    case "functionAreaData":
      iconType = "gnqy.png";
      break;
    case "builidPointListData":
      iconType = "jzgd.png";
      break;
    case "trafficPointListData":
      iconType = "jt.png";
      break;
    case "memsPointListData":
      iconType = "fz.png";
      break;
    case "monitorSourceListData":
      iconType = "jc.png";
      break;
    case "functionPointListData":
      iconType = "gn.png";
      break;
    case "sensitiveInfoData.pointList":
      iconType = "mgdw.png";
      break;
    case "sensitiveInfoData.sensitiveArea":
      iconType = "mgqy.png";
      break;
    case "whistleListData":
      iconType = "md.png";
      break;
    default:
      iconType = "shsh.png";
      break;
  }
  return iconType;
}

// 显示所选的类别图标
function showSelectListData(_selectType) {
  // 关闭辅助、投诉及其他图层点位显示
  fzLayer.eachGraphic((graphic) => {
    graphic.show = false;
  });
  tsLayer.eachGraphic((graphic) => {
    graphic.show = false;
  });
  yqdLayer.eachGraphic((graphic) => {
    graphic.show = false;
  });
  graphicLayer.eachGraphic((graphic) => {
    graphic.show = false;
  });
  for (let item of _selectType) {
    graphicLayer.eachGraphic((graphic) => {
      if (graphic.attr.pointType == item) {
        graphic.show = true;
      }
    });
    if (item == "memsPointListData") {
      fzLayer.eachGraphic((graphic) => {
        graphic.show = true;
      });
    }
    if (item == "petitionListData") {
      tsLayer.eachGraphic((graphic) => {
        graphic.show = true;
      });
    }
    if (item == "monitorSourceListData") {
      yqdLayer.eachGraphic((graphic) => {
        graphic.show = true;
      });
    }
  }
}

// 画单一点位方法
function drawSinglePos(pos, poiName, voiceData, posData) {
  // if (graphicLayer != null) {
  //   console.log("清空graphicLayer");
  //   map.removeLayer(graphicLayer);
  //   graphicLayer = null;
  //   graphicLayer = new mars3d.layer.GraphicLayer();
  //   map.addLayer(graphicLayer);
  // }
  var graphic = new mars3d.graphic.DivGraphic({
    position: [pos[0], pos[1], 10],
    name: poiName,
    pointerEvents: false, // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
    style: {
      html: `<div class="glPos-Area">
                <div class="glPos-Icon" style="background:${
                  voiceData[0] == undefined
                    ? "rgb(237, 201, 100)"
                    : voiceData[0].isOver == "0"
                    ? "rgb(18, 202, 169)"
                    : "rgb(255, 73, 73)"
                };"><img src="res/images/label/${getIconType(
        posData.pointType
      )}"></div>
                <div class="glPos-Content">${
                  voiceData[0] == undefined
                    ? "<span class='glPos-Dw'>暂无数据</span></div>"
                    : "<span id='glPos-voiceData'>" +
                      voiceData[0].value +
                      "</span>" +
                      "<span class='glPos-Dw'> dB</span></div>"
                }
                <div class="arrow"></div>
              </div>`,
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000), // 按视距距离显示
      scaleByDistance: new Cesium.NearFarScalar(100, 1.0, 20000, 0.1),
      clampToGround: true,
    },
    attr: { posData: posData },
  });

  // 点位点击事件
  graphic.on(mars3d.EventType.click, function (event) {
    console.log(event.graphic.attr);
    selectedPoint = {
      selectedPointObj: graphic.attr.posData,
      pointCode: graphic.attr.posData.pointCode,
      pointType: graphic.attr.posData.pointType,
    };
    mapLPPointClick(
      selectedPoint.selectedPointObj,
      selectedPoint.pointCode,
      selectedPoint.pointType
    );
    // graphic.flyTo({
    //   radius: 1000,
    // });
  });

  // var posView = new mars3d.LngLatPoint(
  //   currentSinglePos.longitude,
  //   currentSinglePos.latitude,
  //   0
  // );

  // map.flyToPoint(posView, {
  //   radius: 1000,
  // });

  var dataIndex = 0;
  var thisGraphic = graphic;
  setInterval(() => {
    dataIndex++;
    if (dataIndex < voiceData.length) {
      var container = thisGraphic.container; // popup对应的DOM
      var lablLiuliang = container.querySelector("#glPos-voiceData");
      var glPosColor = container.querySelector(".glPos-Icon");
      lablLiuliang.innerHTML =
        thisGraphic.attr.posData.dataList[dataIndex].value;
      if (glPosColor) {
        switch (thisGraphic.attr.posData.dataList[dataIndex].isOver) {
          case "0":
            glPosColor.style.background = "rgb(18, 202, 169)";
            lablLiuliang.style.color = "rgb(18, 202, 169)";
            break;
          case "1":
            glPosColor.style.background = "rgb(255, 73, 73)";
            lablLiuliang.style.color = "rgb(255, 73, 73)";
            break;
          case "2":
            glPosColor.style.background = "rgb(237, 201, 100)";
            lablLiuliang.style.color = "rgb(237, 201, 100)";
            break;
          default:
            glPosColor.style.background = "rgb(237, 201, 100)";
            lablLiuliang.style.color = "rgb(237, 201, 100)";
            break;
        }
      }
    }
  }, 1000);
  graphicLayer.addGraphic(graphic);
}

// 画除投诉点外的其他点位方法
function drawMostPos(pos, poiName, poiText, voiceData, attr, pointType) {
  var graphic = new mars3d.graphic.DivGraphic({
    position: [pos[0], pos[1], 10],
    name: poiName,
    pointerEvents: false, // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
    style: {
      html: `<div class="glPos-Area">
                <div class="glPos-Icon" style="background:${
                  voiceData[0] == undefined
                    ? "rgb(237, 201, 100)"
                    : voiceData[0].isOver == "0"
                    ? "rgb(18, 202, 169)"
                    : "rgb(255, 73, 73)"
                };"><img src="res/images/label/${getIconType(pointType)}"></div>
                <div class="glPos-Content">${
                  voiceData[0] == undefined
                    ? "<span class='glPos-Dw'>暂无数据</span></div>"
                    : "<span id='glPos-voiceData'>" +
                      voiceData[0].value +
                      "</span>" +
                      "<span class='glPos-Dw'> dB</span></div>"
                }
                <div class="arrow"></div>
              </div>`,
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000), // 按视距距离显示
      scaleByDistance: new Cesium.NearFarScalar(100, 1.0, 20000, 0.1),
      clampToGround: true,
    },
    attr: { attr: attr, pointType: pointType, position: pos },
    // 可以传入自定义测试点样式
    // testPoint: {
    //   color: '#ff0000',
    //   pixelSize: 8,
    // },
  });
  // 点位点击事件
  graphic.on(mars3d.EventType.click, function (event) {
    console.log(graphic.attr);
    selectedPoint = {
      selectedPointObj: graphic.attr.attr,
      pointName: graphic.attr.attr.pointName,
      pointCode: graphic.attr.attr.pointCode,
      pointType: graphic.attr.attr.pointType,
      pointTypeText: graphic.attr.attr.pointTypeText,
      noiseMonitorType: graphic.attr.pointType,
    };
    mapPointClick(
      selectedPoint.selectedPointObj,
      selectedPoint.pointName,
      selectedPoint.pointCode,
      selectedPoint.pointType,
      selectedPoint.pointTypeText,
      selectedPoint.noiseMonitorType
    );
    // graphic.flyTo({
    //   radius: 1000,
    // });
  });

  graphicLayer.addGraphic(graphic);

  // 绑定tooltip
  var tooltipTemplete = `    <div
  style="
    position: absolute;
    width: 500px;
    height: 250px;
    /* border: 1px solid red; */
  "
>
  <div
    class="tHeader"
    style="
      width: 100%;
      height: 30px;
      color: aliceblue;
      font-weight: bold;
      background-image: url(theader.png);
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.8;
    "
  >
    <span style="padding-left: 20px; line-height: 30px">
      ${graphic.attr.attr.pointName}</span>
  </div>
  <div
    style="
      margin-top: 5px;
      margin-left: 20px;
      width: 90%;
      height: calc(100% - 35px);
      background: rgba(11, 25, 34, 0.9);
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 3px 3px 5px rgba(11, 25, 34, 0.4);
    "
  >
    <table
      style="width: 90%; height: 100%; color: lightgray; font-size: 14px"
    >
      <tr>
        <td  style="
        font-weight: bold;
        text-shadow: 0 0 3px rgb(191, 243, 247);
        color: rgb(179, 247, 251);
      ">
          点位类型：
        </td>
        <td>${graphic.attr.attr.pointTypeText}</td>
      </tr>
      <tr>
        <td  style="
        font-weight: bold;
        text-shadow: 0 0 3px rgb(191, 243, 247);
        color: rgb(179, 247, 251);
      ">
          点位状态：
        </td>
        <td>${
          graphic.attr.attr.dataList[0] == undefined
            ? "无效"
            : graphic.attr.attr.dataList[0].isOver == "1"
            ? "超标"
            : "达标"
        }</td>
      </tr>
      <tr>
        <td style="
        font-weight: bold;
        text-shadow: 0 0 3px rgb(191, 243, 247);
        color: rgb(179, 247, 251);
      ">24小时超标事件数：</td>
        <td>${graphic.attr.attr.overEventCount}</td>
      </tr>
      <tr>
        <td style="
        font-weight: bold;
        text-shadow: 0 0 3px rgb(191, 243, 247);
        color: rgb(179, 247, 251);
      ">24小时投诉案件数：</td>
        <td>${graphic.attr.attr.petitionCount}</td>
      </tr>
      <tr>
        <td style="
        font-weight: bold;
        text-shadow: 0 0 3px rgb(191, 243, 247);
        color: rgb(179, 247, 251);
      ">是否有视频监控：</td>
        <td>${graphic.attr.attr.isVideo == "1" ? "是" : "否"}</td>
      </tr>
      <tr>
        <td style="
        font-weight: bold;
        text-shadow: 0 0 3px rgb(191, 243, 247);
        color: rgb(179, 247, 251);
      ">是否有超标录音：</td>
        <td>${graphic.attr.attr.isRadioRecord == "1" ? "是" : "否"}</td>
      </tr>
    </table>
  </div>
</div>
`;
  graphic.bindTooltip(tooltipTemplete, {
    direction: "none",
    offsetX: 170,
    offsetY: -80,
    // scaleByDistance: true,
    // distanceDisplayCondition: true,
    // distanceDisplayCondition_far: 10000,
    // distanceDisplayCondition_near: 0,
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000), // 按视距距离显示
    scaleByDistance: new Cesium.NearFarScalar(100, 1.0, 20000, 0.1),
    // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    // verticalOrigin: Cesium.VerticalOrigin.TOP,
  });
}

// 更新标注上的噪声显示
var reVoiceDataInter = null;
function reVoiceData() {
  var voiceDataIndex = 0;
  switch (selectPara) {
    case "real":
      reVoiceDataInter = setInterval(() => {
        voiceDataIndex++;
        if (voiceDataIndex < 60) {
          graphicLayer.eachGraphic((graphic) => {
            if (graphic.attr.attr.dataList == undefined) {
              return 0;
            }
            if (graphic.attr.attr.dataList.length != 0) {
              var container = graphic.container; // popup对应的DOM
              var lablLiuliang = container.querySelector("#glPos-voiceData");
              var glPosColor = container.querySelector(".glPos-Icon");
              // 修改噪声值
              if (lablLiuliang) {
                if (graphic.attr.attr.dataList[voiceDataIndex] != undefined) {
                  lablLiuliang.innerHTML =
                    graphic.attr.attr.dataList[voiceDataIndex].value;
                } else {
                  // 点位datalist数值不够60
                  // console.log(graphic.attr.attr);
                  lablLiuliang.innerHTML = graphic.attr.attr.dataList[0].value;
                }
              }
              // 修改底板颜色
              if (glPosColor) {
                if (graphic.attr.attr.dataList[voiceDataIndex] != undefined) {
                  switch (graphic.attr.attr.dataList[voiceDataIndex].isOver) {
                    case "0":
                      glPosColor.style.background = "rgb(18, 202, 169)";
                      lablLiuliang.style.color = "rgb(18, 202, 169)";
                      break;
                    case "1":
                      glPosColor.style.background = "rgb(255, 73, 73)";
                      lablLiuliang.style.color = "rgb(255, 73, 73)";
                      break;
                    case "2":
                      glPosColor.style.background = "rgb(237, 201, 100)";
                      lablLiuliang.style.color = "rgb(237, 201, 100)";
                      break;
                    default:
                      glPosColor.style.background = "rgb(237, 201, 100)";
                      lablLiuliang.style.color = "rgb(237, 201, 100)";
                      break;
                  }
                }
              }
            }
          });
        } else {
          console.log("重新请求了地图点位接口");
          voiceDataIndex = 0;
          getNewBigViewMapInfo("", selectPara);
        }
      }, 1000);
      break;
    default:
      reVoiceDataInter = setInterval(() => {
        graphicLayer.eachGraphic((graphic) => {
          if (graphic.attr.attr.dataList == undefined) {
            return 0;
          }
          if (graphic.attr.attr.dataList.length != 0) {
            var container = graphic.container; // popup对应的DOM
            var lablLiuliang = container.querySelector("#glPos-voiceData");
            if (lablLiuliang) {
              lablLiuliang.innerHTML = graphic.attr.attr.dataList[0].value;
            }
          }
        });
        getNewBigViewMapInfo("", selectPara);
      }, 1000 * 60);
      break;
  }
  // clearInterval(reVoiceDataInter);
  // console.log("噪声动态计时器被清除");
}

// 请求地图点位数据并开启噪声更新
// getNewBigViewMapInfo("", selectPara);
// reVoiceData();

// 投诉点位画法
function drawTSPos(pos, poiName, posData) {
  var graphic = new mars3d.graphic.BillboardEntity({
    name: poiName,
    position: [pos[0], pos[1]],
    show: false,
    style: {
      image: "img/marker/mark2.png",
      // scale: 10,
      scaleByDistance: true,
      scaleByDistance_far: 20000,
      scaleByDistance_farValue: 0.5,
      scaleByDistance_near: 1000,
      scaleByDistance_nearValue: 1,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      clampToGround: true,
      // label: {
      //   text: poiText,
      //   font_size: 16,
      //   font_family: "微软雅黑",
      //   color: "#ffffff",
      //   pixelOffsetY: 20,
      //   distanceDisplayCondition: true,
      //   distanceDisplayCondition_far: 10000,
      //   distanceDisplayCondition_near: 0,
      // },
    },
    attr: {
      posData: posData,
    },
  });
  // 投诉点位弹窗样式
  var innerHtml = `<div style="
  width: 280px;
  overflow: hidden;
  background-image: url(${"res/images/small.png"});
  background-repeat:no-repeat;
  background-size: cover;
  position: relative;
">
<!-- 三角 -->
<div
style="position: absolute;top:0px;right: 0px;width: 0px;height: 0px;border-top: 58px solid rgba(55,244,233,.5);border-left: 58px solid transparent;">
</div>
<div style="
    position: relative;
    padding-top: 10px;
    width: 70%;
    height: 26px;
    font-size: 16px;
    font-family: 'Microsoft YaHei';
    font-weight: bolder;
    color: #ffffff;
    padding-bottom: 10px;
    padding-left: 15px;
    margin-left: 15px;
    margin-bottom: 20px;
  ">
社会生活噪声投诉
</div>
<div style="
    position: relative;
    width: 100%;
  ">
<div style="
      padding-left: 30px;
      position: relative;
      width: 80%;
      color: #37f4e9;
      font-weight: bold;
    ">
  投诉对象:<span style="margin-left: 5px; color: #ffffff; font-weight: normal;font-size: 14px;">${
    posData.petitionObject
  }</span>
</div>

<div style="
      padding-left: 30px;
      margin: 20px 0 0px;
      position: relative;
      width: 90%;
      color: #37f4e9;
      font-weight: bold;
      padding-bottom: 20px;
    ">
  投诉主题:
  <p style="
        margin: 5px 0px;
        position: relative;
        font-size: 12px;
        color: #ffffff;
        font-weight: normal;
        padding-right: 20px;
      ">
      ${posData.petitionTitle}
  </p>
</div>
<div style="width: 90%; font-size: 12px; text-align: right; color: #ffffff; border-top: 2px solid rgba(255,255,255,.3); margin: 0 auto; height: 44px; line-height: 40px;
">
  投诉时间:<span style="margin-left: 3px;">${posData.petitionTime}</span>
</div>
</div>
</div>`;
  graphic.on(mars3d.EventType.click, function (event) {
    console.log(graphic.attr.posData);
    selectedPoint = {
      selectedPointObj: graphic.attr.posData,
    };
    mapPointClick(selectedPoint.selectedPointObj);
  });

  // 绑定Popup
  // graphic.bindPopup(innerHtml, { offsetY: -30 });

  // 绑定tooltip
  var tooltipTemplete = `<div
  style="
    position: absolute;
    width: 500px;
    height: 250px;
    /* border: 1px solid red; */
  "
>
  <div
    class="tHeader"
    style="
      width: 100%;
      height: 30px;
      color: aliceblue;
      font-weight: bold;
      background-image: url(theader.png);
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.8;
    "
  >
    <span style="padding-left: 20px; line-height: 30px">
      ${graphic.attr.posData.petitionObject}</span
    >
  </div>
  <div
    style="
      margin-top: 5px;
      margin-left: 20px;
      width: 90%;
      height: calc(100% - 35px);
      background: rgba(11, 25, 34, 0.9);
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 3px 3px 5px rgba(11, 25, 34, 0.4);
    "
  >
    <table
      style="
        width: 90%;
        height: 100%;
        color: lightgray;
        font-size: 14px;
        table-layout: fixed;
        word-break: break-all;
        word-wrap: break-word;
        border-collapse: collapse;
      "
    >
      <tr>
        <td
          style="
            font-weight: bold;
            text-shadow: 0 0 3px rgb(191, 243, 247);
            color: rgb(179, 247, 251);
          "
        >
        投诉对象:
        </td>
        <td>${graphic.attr.posData.petitionType}</td>
      </tr>
      <tr>
        <td
          style="
            font-weight: bold;
            text-shadow: 0 0 3px rgb(191, 243, 247);
            color: rgb(179, 247, 251);
          "
        >
        投诉主题:
        </td>
        <td style="white-space: pre-line;">${graphic.attr.posData.petitionTitle}</td>
      </tr>
      <tr>
        <td
          style="
            font-weight: bold;
            text-shadow: 0 0 3px rgb(191, 243, 247);
            color: rgb(179, 247, 251);
          "
        >
        投诉时间：
        </td>
        <td>${graphic.attr.posData.petitionTime}</td>
      </tr>
      <tr>
        <td
          style="
            font-weight: bold;
            text-shadow: 0 0 3px rgb(191, 243, 247);
            color: rgb(179, 247, 251);
          "
        >
          当前环节：
        </td>
        <td>${graphic.attr.posData.petitionStatus}</td>
      </tr>
    </table>
  </div>
</div>`;
  graphic.bindTooltip(tooltipTemplete, {
    direction: "none",
    offsetX: 20,
    offsetY: -30,
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000), // 按视距距离显示
    scaleByDistance: new Cesium.NearFarScalar(100, 1.0, 20000, 0.1),
  });

  tsLayer.addGraphic(graphic);
}

// 辅助点位画法
function drawFZPos(pos, posData, isShow) {
  // var graphic = new mars3d.graphic.BillboardEntity({
  //   name: poiName,
  //   position: [pos[0], pos[1]],
  //   show: false,
  //   style: {
  //     image: "img/marker/fzLable.png",
  //     // scale: 10,
  //     scaleByDistance: true,
  //     scaleByDistance_far: 20000,
  //     scaleByDistance_farValue: 0.5,
  //     scaleByDistance_near: 1000,
  //     scaleByDistance_nearValue: 1,
  //     horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
  //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  //     clampToGround: true,
  //   },
  //   attr: {
  //     posData: posData,
  //   },
  // });

  // var graphic = new mars3d.graphic.DivGraphic({
  //   position: [pos[0], pos[1]],
  //   name: poiName,
  //   pointerEvents: false, // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
  //   style: {
  //     html: ` <div>
  //       <div
  //         id="fzValue"
  //         style="
  //           width: 60px;
  //           height: 60px;
  //           background-color:${
  //             posData.dataList[0] == undefined
  //               ? "rgb(237, 201, 100)"
  //               : posData.dataList[0].isOver == "0"
  //               ? "rgb(18, 202, 169)"
  //               : "rgb(255, 73, 73)"
  //           };
  //           border: 1px solid white;
  //           color: white;
  //           font-weight: bold;
  //           border-radius: 50%;
  //           display: flex;
  //           justify-content: center;
  //           align-items: center;
  //         "
  //       >
  //       ${
  //         posData.dataList[0] == undefined
  //           ? "<span class='glPos-Dw'>暂无数据</span></div>"
  //           : "<span id='glPos-voiceData'>" +
  //             posData.dataList[0].value +
  //             "</span>"
  //       }
  //       </div>
  //       <div
  //         id="fzLine"
  //         style="
  //           padding-right: 28px;
  //           border-right: 2px solid white;
  //           width: 1px;
  //           height: 40px;
  //         "
  //       ></div>
  //     </div>`,
  //     horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
  //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000), // 按视距距离显示
  //     scaleByDistance: new Cesium.NearFarScalar(100, 1.0, 20000, 0.1),
  //     clampToGround: true,
  //     show: false,
  //   },
  //   attr: { posData: posData },
  //   // 可以传入自定义测试点样式
  //   // testPoint: {
  //   //   color: '#ff0000',
  //   //   pixelSize: 8,
  //   // },
  // });

  // var graphic = new mars3d.graphic.PointPrimitive({
  //   position: [pos[0], pos[1]],
  //   style: {
  //     color: "rgb(18, 202, 169)",
  //     // posData.dataList[0] == undefined
  //     //   ? "rgb(237, 201, 100)"
  //     //   : posData.dataList[0].isOver == "0"
  //     //   ? "rgb(18, 202, 169)"
  //     //   : "rgb(255, 73, 73)",
  //     pixelSize: 60,
  //     // outlineColor: "#ffffff",
  //     //     opacity:1,
  //     // outlineWidth: 2,
  //     label: {
  //       // 不需要文字时，去掉label配置即可
  //       text:
  //         posData.dataList[0] == undefined
  //           ? "暂无数据"
  //           : posData.dataList[0].value,
  //       font_size: 20,
  //       color: "#ffffff",
  //       outline: true,
  //       outlineColor: "#000000",
  //       pixelOffsetY: 0,
  //       visibleDepth: false,
  //     },
  //   },
  //   attr: { posData: posData },
  // });

  var graphic = new mars3d.graphic.PointPrimitive({
    position: [pos[0], pos[1], 40 + Math.random() * 30],
    style: {
      color:
        posData.dataList[0] == undefined
          ? "rgb(237, 201, 100)"
          : posData.dataList[0].isOver == "0"
          ? "rgb(18, 202, 169)"
          : "rgb(255, 73, 73)",
      pixelSize: 60,
      outlineColor: "#ffffff",
      outlineWidth: 2,
      scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 2000, 0.5),
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 3000),
      label: {
        // 不需要文字时，去掉label配置即可
        text:
          posData.dataList[0] == undefined
            ? "无效"
            : posData.dataList[0].value.toFixed(1),
        font_size: 20,
        color: "#ffffff",
        outline: true,
        outlineWidth: 2,
        outlineColor: "#000000",
        pixelOffsetY: 10,
        visibleDepth: false,
        scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 2000, 0.5),
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
          0.0,
          3000
        ),
      },
    },
    show: isShow,
    attr: { posData: posData },
  });

  // 绑定tooltip
  var tooltipTemplete = `<div
  style="
    position: absolute;
    width: 500px;
    height: 250px;
    /* border: 1px solid red; */
  "
>
  <div
    class="tHeader"
    style="
      width: 100%;
      height: 30px;
      color: aliceblue;
      font-weight: bold;
      background-image: url(theader.png);
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.8;
    "
  >
    <span style="padding-left: 20px; line-height: 30px">
      ${graphic.attr.posData.pointName}</span
    >
  </div>
  <div
    style="
      margin-top: 5px;
      margin-left: 20px;
      width: 90%;
      height: calc(100% - 35px);
      background: rgba(11, 25, 34, 0.9);
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 3px 3px 5px rgba(11, 25, 34, 0.4);
    "
  >
    <table
      style="
        width: 90%;
        height: 100%;
        color: lightgray;
        font-size: 14px;
        table-layout: fixed;
        word-break: break-all;
        word-wrap: break-word;
        border-collapse: collapse;
      "
    >
      <tr>
        <td
          style="
            font-weight: bold;
            text-shadow: 0 0 3px rgb(191, 243, 247);
            color: rgb(179, 247, 251);
          "
        >
          点位类型：
        </td>
        <td style="white-space: pre-line;">${
          graphic.attr.posData.pointTypeText
        }</td>
      </tr>
      <tr>
        <td
          style="
            font-weight: bold;
            text-shadow: 0 0 3px rgb(191, 243, 247);
            color: rgb(179, 247, 251);
          "
        >
          24小时超标事件数：
        </td>
        <td>${graphic.attr.posData.overEventCount}</td>
      </tr>
      <tr>
        <td
          style="
            font-weight: bold;
            text-shadow: 0 0 3px rgb(191, 243, 247);
            color: rgb(179, 247, 251);
          "
        >
          24小时投诉案件数：
        </td>
        <td>${graphic.attr.posData.petitionCount}</td>
      </tr>
      <tr>
        <td
          style="
            font-weight: bold;
            text-shadow: 0 0 3px rgb(191, 243, 247);
            color: rgb(179, 247, 251);
          "
        >
          是否有视频监控：
        </td>
        <td>${graphic.attr.posData.isVideo == "1" ? "是" : "否"}</td>
      </tr>
      <tr>
        <td
          style="
            font-weight: bold;
            text-shadow: 0 0 3px rgb(191, 243, 247);
            color: rgb(179, 247, 251);
          "
        >
          是否有超标录音：
        </td>
        <td>${graphic.attr.posData.isRadioRecord == "1" ? "是" : "否"}</td>
      </tr>
    </table>
  </div>
</div>`;
  graphic.bindTooltip(tooltipTemplete, {
    direction: "none",
    offsetX: 30,
    offsetY: 0,
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000), // 按视距距离显示
    scaleByDistance: new Cesium.NearFarScalar(100, 1.0, 20000, 0.1),
  });

  graphic.on(mars3d.EventType.click, function (event) {
    // console.log(graphic.attr);
    selectedPoint = {
      selectedPointObj: graphic.attr,
      pointName: graphic.attr.posData.pointName,
      pointCode: graphic.attr.posData.pointCode,
      pointType: graphic.attr.posData.pointType,
      pointTypeText: graphic.attr.posData.pointTypeText,
      noiseMonitorType: "memsPointListData",
    };
    mapPointClick(
      selectedPoint.selectedPointObj,
      selectedPoint.pointName,
      selectedPoint.pointCode,
      selectedPoint.pointType,
      selectedPoint.pointTypeText,
      selectedPoint.noiseMonitorType
    );
    // graphic.flyTo({
    //   radius: 1000,
    // });
  });

  fzLayer.addGraphic(graphic);
}
// 更新辅助点显示的值
var fzInter;
function changeFzStyle() {
  var index = 0;
  fzInter = setInterval(() => {
    index++;
    fzLayer.eachGraphic((graphic) => {
      if (index < 60) {
        if (graphic.attr.posData.dataList[index] != undefined) {
          graphic.label.text =
            graphic.attr.posData.dataList[index].value.toFixed(1);
          graphic.style.color =
            graphic.attr.posData.dataList[index].isOver == "0"
              ? "rgb(18, 202, 169)"
              : "rgb(255, 73, 73)";
        }
      }
    });
  }, 1000);
}

// 源清单点位画法
function drawYQDPos(pos, poiName, posData) {
  var graphic = new mars3d.graphic.BillboardEntity({
    name: poiName,
    position: [pos[0], pos[1]],
    show: false,
    style: {
      image: "img/marker/mark4.png",
      // scale: 10,
      scaleByDistance: true,
      scaleByDistance_far: 20000,
      scaleByDistance_farValue: 0.5,
      scaleByDistance_near: 1000,
      scaleByDistance_nearValue: 1,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      clampToGround: true,
    },
    attr: {
      posData: posData,
    },
  });

  // 绑定tooltip
  var tooltipTemplete = `<div
  style="
    position: absolute;
    width: 400px;
    height: 150px;
    /* border: 1px solid red; */
  "
>
  <div
    class="tHeader"
    style="
      width: 100%;
      height: 30px;
      color: aliceblue;
      font-weight: bold;
      background-image: url(theader.png);
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.8;
    "
  >
    <span style="padding-left: 20px; line-height: 30px">
      ${graphic.attr.posData.sourceName}</span
    >
  </div>
  <div
    style="
      margin-top: 5px;
      margin-left: 20px;
      width: 90%;
      height: calc(100% - 35px);
      background: rgba(11, 25, 34, 0.9);
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 3px 3px 5px rgba(11, 25, 34, 0.4);
    "
  >
    <table
      style="
        width: 90%;
        height: 100%;
        color: lightgray;
        font-size: 14px;
        table-layout: fixed;
        word-break: break-all;
        word-wrap: break-word;
        border-collapse: collapse;
      "
    >
      <tr>
        <td
          style="
            font-weight: bold;
            text-shadow: 0 0 3px rgb(191, 243, 247);
            color: rgb(179, 247, 251);
          "
        >
        点位类型:
        </td>
        <td>${graphic.attr.posData.sourceType}</td>
      </tr>
      <tr>
        <td
          style="
            font-weight: bold;
            text-shadow: 0 0 3px rgb(191, 243, 247);
            color: rgb(179, 247, 251);
          "
        >
        点位编号:
        </td>
        <td style="white-space: pre-line;">${
          graphic.attr.posData.sourceCode.split("_")[0] +
          "_\n" +
          graphic.attr.posData.sourceCode.split("_")[1]
        }</td>
      </tr>
    </table>
  </div>
</div>`;
  graphic.bindTooltip(tooltipTemplete, {
    direction: "none",
    offsetX: 20,
    offsetY: -30,
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000), // 按视距距离显示
    scaleByDistance: new Cesium.NearFarScalar(100, 1.0, 20000, 0.1),
  });

  graphic.on(mars3d.EventType.click, function (event) {
    // console.log(graphic.attr);
    selectedPoint = {
      selectedPointObj: graphic.attr,
      pointName: graphic.attr.posData.sourceName,
      pointCode: graphic.attr.posData.sourceCode,
      pointType: graphic.attr.posData.sourceType,
    };
    mapPointClick(
      selectedPoint.selectedPointObj,
      selectedPoint.pointName,
      selectedPoint.pointCode,
      selectedPoint.pointType
    );
    // graphic.flyTo({
    //   radius: 1000,
    // });
  });

  yqdLayer.addGraphic(graphic);
}

// 鸣笛抓拍点位画法
function drawWhistlePos(pos, poiName, whistCount, posData) {
  var graphic = new mars3d.graphic.DivGraphic({
    position: [pos[0], pos[1]],
    show: true,
    name: poiName,
    pointerEvents: false, // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
    style: {
      html: `<div class="glPos-Area">
                <div class="glPos-Icon" style="background: rgb(255, 73, 73)">
                <img src="res/images/label/md.png"></div>
                <div class="glPos-Content" style="color:rgb(255, 73, 73)">${
                  whistCount == undefined
                    ? "<span class='glPos-Dw'>暂无数据</span></div>"
                    : "<span id='glPos-voiceData'>" + whistCount + " 次</span>"
                }
                <div class="arrow"></div>
              </div>`,
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000), // 按视距距离显示
      scaleByDistance: new Cesium.NearFarScalar(100, 1.0, 20000, 0.1),
      clampToGround: true,
    },
    attr: { attr: posData },
    // 可以传入自定义测试点样式
    // testPoint: {
    //   color: '#ff0000',
    //   pixelSize: 8,
    // },
  });
  // 点位点击事件
  graphic.on(mars3d.EventType.click, function (event) {
    console.log(graphic.attr);
    selectedPoint = {
      selectedPointObj: graphic.attr.attr,
      pointName: graphic.attr.attr.pointName,
      pointCode: graphic.attr.attr.pointCode,
    };
    mapPointClick(
      selectedPoint.selectedPointObj,
      selectedPoint.pointName,
      selectedPoint.pointCode
    );
    // graphic.flyTo({
    //   radius: 1000,
    // });
  });

  graphicLayer.addGraphic(graphic);

  // 绑定tooltip
  var tooltipTemplete = ` <div
  style="
    position: absolute;
    width: 400px;
    height: 150px;
    /* border: 1px solid red; */
  "
>
  <div
    class="tHeader"
    style="
      width: 100%;
      height: 30px;
      color: aliceblue;
      font-weight: bold;
      background-image: url(theader.png);
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.8;
    "
  >
    <span style="padding-left: 20px; line-height: 30px">
      ${graphic.attr.attr.pointName}</span
    >
  </div>
  <div
    style="
      margin-top: 5px;
      margin-left: 20px;
      width: 90%;
      height: calc(100% - 35px);
      background: rgba(11, 25, 34, 0.9);
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 3px 3px 5px rgba(11, 25, 34, 0.4);
    "
  >
    <table
      style="width: 90%; height: 100%; color: lightgray; font-size: 14px"
    >
      <tr>
        <td  style="
        font-weight: bold;
        text-shadow: 0 0 3px rgb(191, 243, 247);
        color: rgb(179, 247, 251);
      ">
          点位类型：
        </td>
        <td>鸣笛抓拍点位</td>
      </tr>
      <tr>
        <td style="
        font-weight: bold;
        text-shadow: 0 0 3px rgb(191, 243, 247);
        color: rgb(179, 247, 251);
      ">鸣笛次数：</td>
        <td>${graphic.attr.attr.dataCount}</td>
      </tr>
    </table>
  </div>
</div>`;
  graphic.bindTooltip(tooltipTemplete, {
    direction: "none",
    offsetX: 170,
    offsetY: -80,
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000), // 按视距距离显示
    scaleByDistance: new Cesium.NearFarScalar(100, 1.0, 20000, 0.1),
  });
}

// 画热力图
var heatLayer = null;
function drawHeat(arr) {
  if (heatLayer != null) {
    console.log("热力图图层销毁");
    clearInterval(drawHeatDataInter);
    map.removeLayer(heatLayer);
    heatLayer = null;
  }
  heatLayer = new mars3d.layer.HeatLayer({
    positions: arr,
    // 以下为热力图本身的样式参数
    heatStyle: {
      radius: 5,
      blur: 1,
      maxOpacity: 0.8,
      minOpacity: 0,
      gradient: {
        0.41: "#4696db",
        0.5: "#16d3b3",
        0.6: "#4ef08d",
        0.7: "#ede870",
        0.75: "#faa36e",
        0.8: "#ef6656",
      },
    },
    // min: 40,
    // max: 80,
    // 以下为矩形矢量对象的样式参数
    style: {
      opacity: 1,
      clampToGround: true,
      // classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
      // arc: false, // 是否为曲面
      // height: 200.0,
    },
    // flyTo: true,
  });
  map.addLayer(heatLayer);
  console.log("load-heatLayer");
}

// 按指定长度分割数组
var listChunk = (list, size = 1, cacheList = []) => {
  var tmp = [...list];
  if (size <= 0) {
    return cacheList;
  }
  while (tmp.length) {
    cacheList.push(tmp.splice(0, size));
  }
  return cacheList;
};

// 噪声来源
var viewShed;
var viewShedPos = [
  [113.503802, 22.22594, 4.2],
  [113.506301, 22.221153, 6.2],
];
function addViewShed(_pos) {
  viewShed = new mars3d.graphic.ViewShed({
    position: _pos,
    style: {
      angle: 40,
      angle2: 10,
      distance: 300,
      heading: 360 * Math.random(),
      pitch: 0,
      addHeight: 1,
      visibleAreaColor: "#FF8C00",
      hiddenAreaColor: "#FF8C00",
      showFrustum: true,
    },
  });
  viewShedLayer.addGraphic(viewShed);
}

function initVoiceSource() {
  if (viewShedLayer != null) {
    console.log("清空viewShedLayer");
    map.removeLayer(viewShedLayer);
    viewShedLayer = null;
    viewShedLayer = new mars3d.layer.GraphicLayer();
    map.addLayer(viewShedLayer);
  }

  for (let item of viewShedPos) {
    addViewShed(item);
  }
}

/**
 * 地图点位弹出事件（高凌负责写，四维调用）
 * @selectedPointObj 被点击的点位的所有信息
 * @pointName 点位名称
 * @pointCode 点位编号
 * @pointType 点位类型
 * @pointTypeText 点位类型标注
 * @noiseMonitorType 数据类型
 */
function mapPointClick(
  selectedPointObj,
  pointName,
  pointCode,
  pointType,
  pointTypeText,
  noiseMonitorType
) {
  //to do 根据点位类型，控制跳转、刷新数据、弹窗
  console.log(selectedPointObj);
  toastr.info("点位名称:" + pointName);
  toastr.info("点位编号:" + pointCode);
  toastr.info("点位类型:" + pointType);
  toastr.info("点位类型标注:" + pointTypeText);
  toastr.info("数据类型:" + noiseMonitorType);
}

function mapLPPointClick(selectedPointObj, pointCode, pointType) {
  console.log(selectedPointObj);
  toastr.info("点位编号:" + pointCode);
  toastr.info("点位类型:" + pointType);
}

/**
 * 根据区域编号、热力图类型 刷新地图（四维负责写，高凌调用）
 * @areaCode 区域编号
 * @dataType 数据类型（实时数据-real,分钟数据-minute,小时数据-hour,昼夜间数据-dn）
 */
function initMapPointData(areaCode, dataType) {
  //to do 根据数据类型绘制热力图效果
}

/**
 * 根据区域编号绘制地图点位（四维负责写，高凌调用）
 * @areaCode 区域编号
 */
function initMapPointByAreaCode(areaCode) {
  //to do 根据区域初始化地图上的各种点位
  loadListData(areaCode);
  toastr.info("加载" + areaCode + "点位数据");
}

/**
 * 设置热力图数据（四维负责写，高凌调用）
 * @dataType 数据类型（实时数据-real,分钟数据-minute,小时数据-hour,昼夜间数据-dn）
 */
function setHeatMapData(dataType) {
  getheatData();
  toastr.info(dataType);
  //to do 根据数据类型绘制热力图效果
}
